{% extends 'report/base.html' %}
{% block content %}
    <div>
        <form id="ff">
            {% csrf_token %}
        </form>
    </div>
    <div id="c"><span class="badge btn-primary">{{ title }}</span></div>
    <div id="myGrid" style="height: 600px"><!--表格 --></div>
    <div id="rpt_upload" style="height: 600px"><!--报告上传 --></div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            console.log({{ data|safe }});
            // csrf
            let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            // 表格
            // 列
            let btnIcon = function (cell, formatterParams, onRendered) {
                return "<button class='btn btn-primary'>报告</button>";
            };
            let rptCount = function (cell, formatterParams, onRendered) {
                let data = cell.getData();
                if (data.docs > 0)
                    return data.id + "<span class='badge badge-success'>" + data.docs + "</span>";
                else
                    return data.id
            };

            // 列定义
            let columns = ([{'title': 'id', 'field': 'id', 'formatter': rptCount, 'width': 70}]);
            $.each({{ cols|safe }}, function (i, v) {
                columns.push(v);
            });
            columns.push({
                title: '操作',
                formatter: btnIcon,
                cellClick: function (e, cell) {
                    console.log(cell);
                    let data = cell.getData();  // 单元格数据
                    $("#rpt_upload").iziModal({
                        title: '报告',
                        headerColor: '#35b99b',
                        iframe: true,
                        width: '60%',
                        iframeHeight: 600,
                        radius: 3,
                        transitionIn: 'comingIn',
                        iframeURL: '{% url "report:rpt_view" idx  %}'
                            + '?p=' + data.id,
                        onClosed: function () {
                            $('#rpt_upload').iziModal('destroy');
                        }
                    });
                    $('#rpt_upload').iziModal('open');
                }
            });

            // 选项
            let data = {{data|safe}};
            // console.log(data);

            // 初始化
            let grid = new Tabulator('#myGrid', {
                dataTree: true,
                dataTreeFilter: false,
                layout: "fitDataTable",
                columns: columns,
                data: data,
                pagination: "local",
                paginationSize: 10,
                initialSort: [
                    {column: 'id', dir: 'desc'}
                ],
            });


        });

    </script>
{% endblock %}